<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title th:text="#{i18n.text_10}"></title>
	<head th:replace="head"/>
	<style>
		#main-center {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: stretch;
			background-color: #f5f5f5;
		}

		.form-base {
			border-radius: 4px;
			background: #FFFFFF;
			padding: 20px 30px;
		}

		.step-base {
			width: 100%;
			padding-bottom: 30px
		}

		.step-base .base-line {
			margin: 20px 80px -30px 80px;
			height: 3px;
			background: #C0CCDA
		}

		.step-base .base-line .inner {
			background: #13CE66;
			height: 3px
		}

		.step-base .top {
			padding: 10px 50px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			background: transparent;
		}

		.step-base .top .step {
			width: 40px;
			height: 40px;
			background: #C0CCDA;
			border-radius: 50%;
			color: #ffffff;
			text-align: center;
			line-height: 40px;
			font-size: 20px
		}

		.step-base .top .step .inner {
			background: #ffffff;
			border-radius: 50%;
			height: 34px;
			width: 34px;
			margin: 3px;
			color: #C0CCDA;
			line-height: 34px
		}

		.step-base .top .step.success {
			background: #13CE66;
			color: #FFFFFF
		}

		.step-base .top .step.success:before {
			font-family: 'Glyphicons Halflings';
			content: "\e013"
		}

		.step-base .top .step.current {
			background: #C0CCDA;
			color: #FFFFFF
		}

		.step-base .bottom {
			padding: 0px 0px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%
		}

		.step-base .bottom .step-desc {
			flex: 1 1;
			text-align: center;
			font-size: 14px;
			color: #475669
		}

		.step-base .bottom .step-desc.success {
			color: #13CE66
		}

		a.gray-link {
			color: #888888
		}

		a.gray-link:hover {
			color: #20A0FF
		}

		.err-msg {
			margin: 0px;
			font-size: 12px;
			color: #FF4949;
			background: rgba(255, 73, 73, 0.1);
			border: #FF4949 1px solid;
			padding: 10px;
			margin-bottom: 10px;
			border-radius: 4px
		}

		.password-safe-level {
			float: right;
			z-index: 2;
			height: 20px
		}

		.password-safe-level ul {
			padding: 0px;
			height: auto;
			margin: 5px 10px 2px 13px;
			list-style: none;
			float: right;
			display: inline
		}

		.password-safe-level ul li {
			width: 40px;
			border-style: solid;
			margin-right: 1px;
			height: 2px;
			float: left;
			border-color: #b1b1b1
		}

		.password-safe-level label {
			line-height: 20px;
			display: inline;
			font-size: 12px;
			font-weight: thin;
			color: #888
		}

		.desc-content {
			text-align: justify
		}

		.select-search-content {
			padding: 5px
		}

		.success-icon {
			color: #13CE66;
			font-size: 40px
		}

		.error-icon {
			color: #fa666b;
			font-size: 40px
		}

		a.btn.btn-href {
			height: 32px;
			padding: 5px 10px;
			font-size: 13px;
			line-height: 22px
		}

		.ui-pnotify {
			top: 36px;
			right: 36px;
			position: absolute;
			height: auto;
			z-index: 1
		}

		body > .ui-pnotify {
			position: fixed;
			z-index: 100040
		}

		.ui-pnotify.ui-pnotify-in {
			display: block !important
		}

		.ui-pnotify.ui-pnotify-move {
			transition: left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
		}

		.ui-pnotify.ui-pnotify-fade-slow {
			transition: opacity .6s linear;
			opacity: 0
		}

		.ui-pnotify.ui-pnotify-fade-slow.ui-pnotify.ui-pnotify-move {
			transition: opacity .6s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
		}

		.ui-pnotify.ui-pnotify-fade-normal {
			transition: opacity .4s linear;
			opacity: 0
		}

		.ui-pnotify.ui-pnotify-fade-normal.ui-pnotify.ui-pnotify-move {
			transition: opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
		}

		.ui-pnotify.ui-pnotify-fade-fast {
			transition: opacity .2s linear;
			opacity: 0
		}

		.ui-pnotify.ui-pnotify-fade-fast.ui-pnotify.ui-pnotify-move {
			transition: opacity .2s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease
		}

		.ui-pnotify.ui-pnotify-fade-in {
			opacity: 1
		}

		.ui-pnotify .ui-pnotify-shadow {
			-webkit-box-shadow: 0px 6px 28px 0px rgba(0, 0, 0, 0.1);
			-moz-box-shadow: 0px 6px 28px 0px rgba(0, 0, 0, 0.1);
			box-shadow: 0px 6px 28px 0px rgba(0, 0, 0, 0.1)
		}

		.ui-pnotify-container {
			background-position: 0 0;
			padding: .8em;
			height: 100%;
			margin: 0
		}

		.ui-pnotify-container:after {
			content: " ";
			visibility: hidden;
			display: block;
			height: 0;
			clear: both
		}

		.ui-pnotify-container.ui-pnotify-sharp {
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0
		}

		.ui-pnotify-title {
			display: block;
			margin-bottom: .4em;
			margin-top: 0
		}

		.ui-pnotify-text {
			display: block
		}

		.ui-pnotify-icon, .ui-pnotify-icon span {
			display: block;
			float: left;
			margin-right: .2em
		}

		.ui-pnotify.stack-topleft, .ui-pnotify.stack-bottomleft {
			left: 25px;
			right: auto
		}

		.ui-pnotify.stack-bottomright, .ui-pnotify.stack-bottomleft {
			bottom: 25px;
			top: auto
		}

		.ui-pnotify-closer, .ui-pnotify-sticker {
			float: right;
			margin-left: .2em
		}

		.ui-pnotify-container {
			position: relative;
			left: 0
		}

		@media (max-width: 480px) {
			.ui-pnotify-mobile-able.ui-pnotify {
				position: fixed;
				top: 0;
				right: 0;
				left: 0;
				width: auto !important;
				font-size: 1.2em;
				-webkit-font-smoothing: antialiased;
				-moz-font-smoothing: antialiased;
				-ms-font-smoothing: antialiased;
				font-smoothing: antialiased
			}

			.ui-pnotify-mobile-able.ui-pnotify .ui-pnotify-shadow {
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
				border-bottom-width: 5px
			}

			.ui-pnotify-mobile-able .ui-pnotify-container {
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				border-radius: 0
			}

			.ui-pnotify-mobile-able.ui-pnotify.stack-topleft, .ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft {
				left: 0;
				right: 0
			}

			.ui-pnotify-mobile-able.ui-pnotify.stack-bottomright, .ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft {
				left: 0;
				right: 0;
				bottom: 0;
				top: auto
			}

			.ui-pnotify-mobile-able.ui-pnotify.stack-bottomright .ui-pnotify-shadow, .ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft .ui-pnotify-shadow {
				border-top-width: 5px;
				border-bottom-width: 1px
			}
		}

		.pace {
			-webkit-pointer-events: none;
			pointer-events: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none
		}

		.pace-inactive {
			display: none
		}

		.pace .pace-progress {
			background: #20A0FF;
			position: fixed;
			z-index: 2000;
			top: 0;
			right: 100%;
			width: 100%;
			height: 2px
		}

		img-crop {
			width: 100%;
			height: 100%;
			display: block;
			position: relative;
			overflow: hidden
		}

		img-crop canvas {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			outline: none;
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
		}

		.cropArea {
			background: #FFFFFF;
			overflow: hidden;
			width: 100%;
			height: 300px
		}
		input{
			width: 100%;
		}


		button, input, .btn {
			transition: all .3s ease
		}

		a{
			color: #20A0FF;
		}

		.form-base{
			background: #FFFFFF;
			padding: 20px 30px;
			border-radius: 4px;
			box-shadow: 0 1px 5px #ccc;
		}

		input.form-control{
			border: 1px solid #d1d1d1;
			height: 36px;
			background: none;
			box-shadow: none;
			outline: none;
		}

		input.form-control:focus{
			box-shadow: none;
			outline: none;
			border-color: #20A0FF;
		}

		img.captcha{
			width: 100%;
			height: 36px;
		}

		button.btn:focus,button.btn:active{
			box-shadow: none;
			outline: none;
		}

		button.btn.btn-submit{
			border-radius: 2px;
			background: #20A0FF;
			color: #FFFFFF;
			height: 36px;
		}

		button.btn.btn-captcha{
			border-radius: 2px;
			background: #475669;
			color: #FFFFFF;
			height: 36px;
		}

		.blue-title{
			color: #20A0FF;
		}

		#main-center{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: stretch;
			background-color: #f5f5f5;
		}

		a.gray-href{
			color: #888888;
		}

		a.gray-href:hover{
			text-decoration: none;
		}

		font.second{
			color: #FF4949;
			font-size: 2em;
		}

		label.error{
			color: #FF4949;
			position: absolute;
			font-weight: 500;
			display: block;
			font-size: 12px;
			transition: all .3s ease;
		}

		input.form-control.error{
			border-color: #FF4949 !important;
		}

		.err-msg{
			margin: 0px;
			font-size: 12px;
			color: #FF4949;
			background: rgba(255, 73, 73, 0.1);
			border: #FF4949 1px solid;
			padding: 10px;
			margin-bottom: 5px;
			border-radius: 4px;
		}

		.login-state-box{
			background: #FFFFFF;
			border-radius: 4px;
			overflow: hidden;
		}

		.login-state-box .detail{
			padding: 36px;
			font-size: 14px;
		}

		.login-state-box .cas-user{
			background: #7F8FA3;
			padding: 36px 36px;
			text-align: center;
			color: rgba(255, 255, 255, .8);
		}

		.login-state-box .cas-user img{
			height: 80px;
			width: 80px;
			border-radius: 50%;
		}

		.info-base{
			background: #FFFFFF;
			padding: 20px 30px;
		}

		.result-logo{
			font-size: 50px;
			color: #FFFFFF;
		}

		.error-box{
			padding: 100px 0px;
		}

		.error-box .icon{
			text-align: center;
			margin-bottom: 16px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: flex-end;
			font-size: 32px;
			color: #0073aa;
		}

		.error-box .icon img{
			height: 100px;
		}

		.error-box .desc{
			font-size: 14px;
			line-height: 36px;
			color: #262626;
			text-align: center;
		}
	</style>
</head>
<body>
<nav th:replace="nav"/>
<section class="layout">
	<div id="main-center" style="min-height: 596px;">
		<div class="container">
			<div class="row">
				<div class="col-xs-6 col-xs-offset-3">
					<div class="ng-scope">
						<div id="step" class="step-base ng-isolate-scope" step="1">
							<div class="base-line">
								<div class="inner" style="width: 0%;"></div>
							</div>
							<div class="top">
								<div class="step steps1 current" ng-repeat="st in steps">1</div>
								<div class="step steps2" ng-repeat="st in steps">
									<div class="inner">2</div>
								</div>
								<div class="step steps3" ng-repeat="st in steps">
									<div class="inner">3</div>
								</div>
								<div class="step steps4" ng-repeat="st in steps">
									<div class="inner">4</div>
								</div>
							</div>
							<div class="bottom">
								<div class="step-desc current" ng-repeat="st in steps" th:text="#{i18n.text_17}"></div>
								<div class="step-desc" ng-repeat="st in steps" th:text="#{i18n.text_18}"></div>
								<div class="step-desc" ng-repeat="st in steps" th:text="#{i18n.text_19}"></div>
								<div class="step-desc" ng-repeat="st in steps" th:text="#{i18n.text_20}"></div>
							</div>
						</div>
					</div>
					<div class="form-base steps1" style="display: block;">
						<h4 th:text="#{i18n.text_21}"></h4>
						<p class="err-msg ng-binding ng-scope" style="display: none;" ></p>
						<div class="form-horizontal ng-pristine ng-valid ng-valid-email">
							<div class="form-group">
								<div class="col-xs-12">
									<input class="form-control ng-pristine ng-untouched ng-valid ng-valid-email emailVal" th:placeholder="#{i18n.text_7}" type="email"/>
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-8">
									<input class="form-control valid imageCodeVal" th:placeholder="#{i18n.text_22}"/>
								</div>
								<div class="col-xs-4" style="padding-left: 0px;">
									<a href="javascript:;" ><img class="captcha" id="image" src="/valicode"/></a>
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-12">
									<button class="btn btn-submit btn-block" th:text="#{i18n.text_23}"></button>
								</div>
							</div>
						</div>
					</div>
					<div class="form-base steps2" style="display: none;">
						<h4 class="ng-binding"><label th:text="#{i18n.text_18}"></label>:<label class="mobileText"></label></h4>
						<p class="err-msg ng-binding ng-scope" style="display: none;" ></p>
						<div class="form-horizontal ng-pristine ng-valid ng-valid-email">
							<div class="form-group">
								<div class="col-md-8 col-sm-7 col-xs-6">
									<input class="form-control ng-pristine ng-valid ng-touched smsCode" th:placeholder="#{i18n.text_24}" type="text" style="width: 100%;" />
								</div>
								<div class="col-md-4 col-sm-5 col-xs-6">
									<button class="btn btn-sms btn-block ng-binding sendSms" th:text="#{i18n.text_25}"></button>
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-12">
									<button class="btn btn-submit btn-block" th:text="#{i18n.text_23}"></button>
								</div>
							</div>
						</div>
					</div>
					<div class="form-base steps3" style="display: none;">
						<h4 th:text="#{i18n.text_19}"></h4>
						<p class="err-msg ng-binding ng-scope" style="display: none;" ></p>
						<div class="form-horizontal ng-valid ng-dirty ng-valid-parse">
							<div class="form-group">
								<div class="col-xs-12">
									<input class="form-control ng-valid ng-dirty ng-valid-parse ng-touched pwd1" th:placeholder="#{i18n.text_26}" type="password" />
								</div>
								<div class="col-xs-12 ng-scope" >
								</div>
							</div>
							<div class="form-group" >
								<div class="col-xs-12">
									<input class="form-control ng-valid ng-dirty ng-valid-parse ng-touched pwd2" th:placeholder="#{i18n.text_27}" type="password" />
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-12">
									<button class="btn btn-submit btn-block" th:text="#{i18n.text_28}"></button>
								</div>
							</div>
						</div>
					</div>
					<div class="form-base steps4" style="display: none;">
						<h3 th:text="#{i18n.text_29}"></h3>
						<p th:inline="text">[[#{i18n.text_30}]]<a th:href="@{/login}" th:text="#{i18n.text_6}"></a></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<footer th:replace="footer"/>
<script th:src="@{/js/forgotPwd.min.js}"/>
<script>

	$(function () {
		stepChange()
	});
	
	function stepChange(){
		//找到当前为第几步
		var step = $('#step');
		var inner = step.children('.base-line').children('.inner');
		var stepIndex = step.attr('step');
		//定位顶部标题
		var top = step.children('.top').children();
		var bottom=step.children('.bottom').children();
		//监听stepIndex值的改变
		top.each(function (inde) {
			if (stepIndex == inde + 1) {
				$(this).addClass('current').prevAll().removeClass('current').addClass('success').html('');
				$(this).addClass('current').children().removeClass('inner');
				inner.css('width', (stepIndex==4) ? '100%' : ((stepIndex-1) * 17 + (stepIndex-2)*17) + '%');
				(stepIndex==4) ? $(this).addClass('success').removeClass('current').html('') : '';
			}
		});
		bottom.each(function (inde) {
			if (stepIndex == inde + 1) {
				$(this).addClass('current').prevAll().removeClass('current').addClass('success');
				(stepIndex==4) ? $(this).addClass('success').removeClass('current') : '';
			}
		});
	}
</script>
</body>
</html>